React experimental_useFormState Validatsiya Konveyeri: Mustahkam Shakl Validatsiyasi Zanjirlarini Yaratish

Shakl validatsiyasi (tekshiruvi) mustahkam va foydalanuvchilar uchun qulay veb-ilovalar yaratishning asosidir. Reactning experimental_useFormState hooki shakl holatini boshqarish va murakkab validatsiya konveyerlarini joriy qilish uchun kuchli va moslashuvchan yondashuvni taklif etadi. Ushbu blog postida experimental_useFormState yordamida qo'llab-quvvatlash oson, kengaytiriladigan va xalqaro miqyosda moslashtiriladigan shakl validatsiyasi tizimlarini yaratishni ko'rib chiqamiz.

experimental_useFormState hookini tushunish

experimental_useFormState — bu shakllarni boshqarish va validatsiyani soddalashtirish uchun mo'ljallangan eksperimental React hooki (ushbu maqola yozilayotgan vaqtda; eng so'nggi holat uchun har doim rasmiy React hujjatlarini tekshiring). U shakl holati yangilanishlarini boshqaradi va murakkabroq holat o'zgarishlarini boshqarish uchun reducer funksiyalarini aniqlashga imkon beradi. Uning asosiy afzalligi asinxron operatsiyalar va server tomonidagi validatsiya bilan uzluksiz integratsiya qila olishidadir.

Asosiy tushunchalar

• Holatni boshqarish: experimental_useFormState butun shakl holatini boshqaradi, bu esa alohida shakl maydonlarini yangilash bilan bog'liq ortiqcha kodni kamaytiradi.
• Reducer funksiyalari: U holat yangilanishlarini boshqarish uchun reducer funksiyalaridan foydalanadi, bu esa murakkab mantiqni amalga oshirishga va oldindan aytib bo'ladigan holat o'zgarishlarini ta'minlashga imkon beradi. Bu useReducerga o'xshaydi, lekin shakl holati uchun moslashtirilgan.
• Asinxron operatsiyalar: U asinxron operatsiyalar bilan uzluksiz integratsiya qilinadi, bu esa server tomonidagi validatsiya va ma'lumotlarni yuborishni osonlashtiradi.
• Validatsiya konveyeri: Siz ketma-ket bajariladigan validatsiya funksiyalari zanjirini yaratishingiz mumkin, bu shakl validatsiyasiga tuzilmaviy va tartibli yondashuvni ta'minlaydi.

Validatsiya konveyerini yaratish

Validatsiya konveyeri — bu shakl ma'lumotlarini tekshirish uchun birin-ketin bajariladigan funksiyalar ketma-ketligidir. Har bir funksiya ma'lum bir validatsiya tekshiruvini amalga oshiradi va konveyer shaklning to'g'riligi va u bilan bog'liq xatolik xabarlarini ko'rsatadigan umumiy natijani qaytaradi. Bu yondashuv modullik, qayta foydalanish imkoniyati va qo'llab-quvvatlash qulayligini ta'minlaydi.

Misol: Oddiy ro'yxatdan o'tish shakli

Keling, foydalanuvchi nomi, email va parolni talab qiladigan oddiy ro'yxatdan o'tish shakli misolida ko'rib chiqamiz.

1. Shakl holatini aniqlash

Avvalo, biz shaklimizning boshlang'ich holatini aniqlaymiz:

            const initialState = {
  username: '',
  email: '',
  password: '',
  errors: {},
  isValid: false,
};

            

              
                Copy
              
            
          

2. Reducer funksiyasini joriy qilish

Keyin, holat yangilanishlarini boshqarish uchun reducer funksiyasini yaratamiz:

            function formReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return {
        ...state,
        [action.field]: action.value,
      };
    case 'VALIDATE_FORM':
      return {
        ...state,
        errors: action.errors,
        isValid: action.isValid,
      };
    default:
      return state;
  }
}

            

              
                Copy
              
            
          

3. Validatsiya funksiyalarini aniqlash

Endi har bir maydon uchun alohida validatsiya funksiyalarini aniqlaymiz:

            const validateUsername = (username) => {
  if (!username) {
    return 'Foydalanuvchi nomi talab qilinadi.';
  } else if (username.length < 3) {
    return 'Foydalanuvchi nomi kamida 3 belgidan iborat bo\'lishi kerak.';
  } else if (username.length > 20) {
    return 'Foydalanuvchi nomi 20 belgidan uzun bo\'lmasligi kerak.';
  }
  return null;
};

const validateEmail = (email) => {
  if (!email) {
    return 'Email talab qilinadi.';
  } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
    return 'Email manzili noto\'g\'ri.';
  }
  return null;
};

const validatePassword = (password) => {
  if (!password) {
    return 'Parol talab qilinadi.';
  } else if (password.length < 8) {
    return 'Parol kamida 8 belgidan iborat bo\'lishi kerak.';
  }
  return null;
};

            

              
                Copy
              
            
          

4. Validatsiya konveyerini yaratish

Biz validatsiya funksiyalarini konveyerga yig'amiz:

            const validationPipeline = (state) => {
  const errors = {};
  errors.username = validateUsername(state.username);
  errors.email = validateEmail(state.email);
  errors.password = validatePassword(state.password);

  const isValid = Object.values(errors).every((error) => error === null);

  return { errors, isValid };
};

            

              
                Copy
              
            
          

5. experimental_useFormState bilan integratsiya

            import React from 'react';
import { experimental_useFormState as useFormState } from 'react';

function RegistrationForm() {
  const [state, dispatch] = useFormState(formReducer, initialState);

  const handleChange = (e) => {
    dispatch({
      type: 'UPDATE_FIELD',
      field: e.target.name,
      value: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const { errors, isValid } = validationPipeline(state);

    dispatch({
      type: 'VALIDATE_FORM',
      errors,
      isValid,
    });

    if (isValid) {
      // Shaklni yuborish
      console.log('Shakl to\'g\'ri, yuborilmoqda...', state);
    } else {
      console.log('Shakl noto\'g\'ri, iltimos xatolarni tuzating.');
    }
  };

  return (
    

      

        Foydalanuvchi nomi:
        
        {state.errors.username && 
{state.errors.username}
}
      
      

        Email:
        
        {state.errors.email && 
{state.errors.email}
}
      
      

        Parol:
        
        {state.errors.password && 
{state.errors.password}
}
      
      Ro'yxatdan o'tish
    
  );
}

export default RegistrationForm;

            

              
                Copy
              
            
          

Ilg'or validatsiya usullari

Shartli validatsiya

Ba'zan, biror maydonni boshqa maydonning qiymatiga qarab tekshirish kerak bo'ladi. Masalan, foydalanuvchi ma'lum bir mamlakatni tanlagandagina telefon raqamini talab qilishingiz mumkin.

            const validatePhoneNumber = (phoneNumber, country) => {
  if (country === 'USA' && !phoneNumber) {
    return 'AQSh uchun telefon raqami talab qilinadi.';
  }
  return null;
};

            

              
                Copy
              
            
          

Asinxron validatsiya

Asinxron validatsiya maydonning to'g'riligini serverdagi ma'lumotlar bazasi yoki API bilan tekshirish kerak bo'lganda juda muhim. Masalan, foydalanuvchi nomining band yoki band emasligini tekshirmoqchi bo'lishingiz mumkin.

            const validateUsernameAvailability = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.isTaken) {
      return 'Foydalanuvchi nomi allaqachon band.';
    }
    return null;
  } catch (error) {
    console.error('Foydalanuvchi nomining mavjudligini tekshirishda xatolik:', error);
    return 'Foydalanuvchi nomining mavjudligini tekshirishda xatolik.';
  }
};

            

              
                Copy
              
            
          

Siz ushbu asinxron validatsiyani reducerga integratsiya qilishingiz va Promise yoki async/await yordamida asinxronlikni to'g'ri boshqarishingiz kerak bo'ladi.

Maxsus validatsiya qoidalari

Muayyan biznes mantiqini yoki formatlash talablarini boshqarish uchun maxsus validatsiya qoidalarini yaratishingiz mumkin. Masalan, tanlangan mamlakatga qarab pochta indeksini tekshirishingiz kerak bo'lishi mumkin.

            const validatePostalCode = (postalCode, country) => {
  if (country === 'USA' && !/^[0-9]{5}(?:-[0-9]{4})?$/.test(postalCode)) {
    return 'AQSh uchun noto\'g\'ri pochta indeksi.';
  } else if (country === 'Canada' && !/^[A-Z]\d[A-Z] \d[A-Z]\d$/.test(postalCode)) {
    return 'Kanada uchun noto\'g\'ri pochta indeksi.';
  }
  return null;
};

            

              
                Copy
              
            
          

Xalqarolashtirish (i18n) masalalari

Global auditoriya uchun shakllar yaratayotganda, xalqarolashtirish muhim ahamiyatga ega. Quyidagilarni hisobga oling:

• Sana formatlari: Foydalanuvchining hududiy sozlamalariga qarab turli sana formatlarini boshqarish uchun date-fns yoki moment.js kabi kutubxonalardan foydalaning.
• Raqam formatlari: Foydalanuvchining hududiy sozlamalariga mos ravishda raqamlarni formatlash uchun Intl.NumberFormat dan foydalaning.
• Valyuta formatlari: Valyutalarni to'g'ri formatlash, jumladan, tegishli valyuta belgisi va kasr ajratuvchisini ishlatish uchun Intl.NumberFormat dan foydalaning.
• Manzil formatlari: Foydalanuvchining mamlakatiga qarab turli manzil formatlarini boshqarish uchun libaddressinput kabi kutubxonadan foydalanishni o'ylab ko'ring.
• Tarjima qilingan xato xabarlari: Xato xabarlarini tarjima faylida saqlang va ularni foydalanuvchi tilida ko'rsatish uchun i18next kabi kutubxonadan foydalaning.

Misol: Tarjima qilingan xato xabarlari

i18next yordamida xato xabarlarini qanday tarjima qilish mumkinligi:

            // en.json
{
  "username_required": "Username is required.",
  "email_required": "Email is required.",
  "invalid_email": "Email is not valid."
}

// fr.json
{
  "username_required": "Le nom d'utilisateur est obligatoire.",
  "email_required": "L'adresse e-mail est obligatoire.",
  "invalid_email": "L'adresse e-mail n'est pas valide."
}

// Komponent
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  const validateEmail = (email) => {
    if (!email) {
      return t('email_required');
    } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
      return t('invalid_email');
    }
    return null;
  };
}

            

              
                Copy
              
            
          

Maxsus imkoniyatlar (Accessibility) masalalari

Inklyuziv veb-ilovalar yaratish uchun shakllarning maxsus imkoniyatlarga ega bo'lishini ta'minlash juda muhim. Quyidagi ko'rsatmalarga amal qiling:

• Semantik HTMLdan foydalaning: <label>, <input> va <button> kabi tegishli HTML elementlaridan foydalaning.
• Aniq yorliqlarni taqdim eting: <label> elementidagi for atributi va <input> elementidagi id atributi yordamida yorliqlarni shakl maydonlari bilan bog'lang.
• ARIA atributlaridan foydalaning: Ekran o'qish vositalari kabi yordamchi texnologiyalarga qo'shimcha ma'lumot berish uchun ARIA atributlaridan foydalaning.
• Xato xabarlarini taqdim eting: Oson tushuniladigan aniq va qisqa xato xabarlarini ko'rsating. Xato xabarlarini shakl maydonlari bilan bog'lash uchun aria-describedby kabi ARIA atributlaridan foydalaning.
• Klaviatura orqali navigatsiyani ta'minlang: Foydalanuvchilar klaviatura yordamida shaklni kezishi mumkinligiga ishonch hosil qiling. Fokus tartibini boshqarish uchun tabindex atributidan foydalaning.
• Yetarli kontrastdan foydalaning: Ko'rish qobiliyati zaif foydalanuvchilar uchun shaklni o'qilishi oson qilish uchun matn va fon ranglari o'rtasida yetarli kontrastni ta'minlang.

Eng yaxshi amaliyotlar

• Validatsiya funksiyalarini modulli saqlang: Maxsus tekshiruvlarni bajaradigan kichik, qayta ishlatiladigan validatsiya funksiyalarini yarating.
• Doimiy xatoliklarni qayta ishlash strategiyasidan foydalaning: Ilovangiz bo'ylab doimiy xatoliklarni qayta ishlash strategiyasini joriy qiling.
• Foydalanuvchilar uchun qulay xato xabarlarini taqdim eting: Foydalanuvchilarga nima noto'g'ri bo'lganini va uni qanday tuzatishni tushunishga yordam beradigan aniq va qisqa xato xabarlarini ko'rsating.
• Shakllaringizni puxta sinovdan o'tkazing: Shakllaringiz to'g'ri ishlashiga ishonch hosil qilish uchun ularni turli xil ma'lumotlar va turli brauzerlarda sinab ko'ring.
• Shakl kutubxonasidan foydalaning: Shakllarni boshqarish va validatsiyani soddalashtirish uchun Formik yoki React Hook Form kabi shakl kutubxonalaridan foydalanishni o'ylab ko'ring. Bu kutubxonalar shakl holatini boshqarish, validatsiya va ma'lumotlarni yuborish kabi keng ko'lamli funksiyalarni taqdim etadi.
• Xato xabarlari ta'riflarini markazlashtiring: Muvofiqlik va qo'llab-quvvatlash qulayligini ta'minlash uchun barcha shakl xato xabarlarining markaziy omborini saqlang. Bu, shuningdek, xalqarolashtirish jarayonini soddalashtiradi.

Xulosa

Reactning experimental_useFormState hooki, yaxshi aniqlangan validatsiya konveyeri bilan birgalikda, mustahkam va qo'llab-quvvatlash oson bo'lgan shakllarni yaratish uchun kuchli va moslashuvchan yondashuvni ta'minlaydi. Ushbu blog postida keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz foydalanuvchilar uchun qulay, maxsus imkoniyatlarga ega va xalqaro miqyosda moslashuvchan shakllar yaratishingiz mumkin. Eksperimental funksiyalar haqidagi so'nggi yangilanishlar uchun har doim rasmiy React hujjatlariga murojaat qilishni unutmang.

Samarali shakl validatsiyasini yaratish — bu uzluksiz o'rganish jarayonidir. Turli usullarni sinab ko'ring va ularni o'zingizning maxsus ehtiyojlaringizga moslashtiring. Asosiysi, foydalanuvchi tajribasini birinchi o'ringa qo'yish va ham foydalanish oson, ham ishonchli shakllar yaratishdir.